import "./App.css";

export default
function Logo(){
  return(
    <svg 
      className="App-logo"
      width="230"
      height="230"
      xmlns="http://www.w3.org/2000/svg" 
      version="1.1"
    >
      {/* 外框 */}
      <rect 
        x="1" y="1" 
        rx="28" ry="28" 
        width="228" height="228" 
        fill='#000000'
      />
      <rect
        x="6" y="6" 
        rx="26" ry="26" 
        width="218" height="218" 
        fill='#ffffff'
      />
      {/* 辅助线 */}
      {/* <line x1="1" y1="139" x2="229" y2="139" 
        style={{stroke:'black',strokeDasharray:' 1 2'}} />
      <line x1="1" y1="61" x2="229" y2="61" 
        style={{stroke:'black',strokeDasharray:' 1 2'}} />
      <line x1="115" y1="1" x2="115" y2="229" 
        style={{stroke:'black',strokeDasharray:' 1 2'}} /> */}
      {/* T */}
      <g className="T">
        <line className="out-line" x1="77" y1="61" x2="153" y2="61" />
        <line className="out-line" x1="115" y1="139" x2="115" y2="61" />
        <line className="in-line" x1="77" y1="61" x2="153" y2="61" />
        <line className="in-line" x1="115" y1="139" x2="115" y2="61" />
      </g>
      {/* + */}
      <g className="cross">
        <line x1="183" y1="31" x2="199" y2="31" 
          style={{stroke:'red',strokeWidth:'8',strokeLinecap:"square"}} />
      
        <line x1="191" y1="23" x2="191" y2="39" rotate={45}
          style={{stroke:'red',strokeWidth:'8',strokeLinecap:"square"}} />
      </g>
      {/* 藏宝馆 */}
      <g className="txt">
        <text>
          <tspan x="39" y="204" textLength="152" 
            fontSize="48" fontFamily="SimHei" fontWeight="bold">
            藏宝馆
          </tspan>
        </text>
      </g>
    </svg> 
  );
}

function LogoButton(props){
  return(
    <svg 
      className="App-logo"
      width="230"
      height="115"
      xmlns="http://www.w3.org/2000/svg" 
      version="1.1"
    >
      {/* 外框 */}
      <rect 
        x="1" y="1" 
        rx="28" ry="28" 
        width="228" height="114" 
        fill='#000000'
      />
      <rect 
        x="6" y="6" 
        rx="26" ry="26" 
        width="218" height="104" 
        fill='#ffffff'
      />
      {/* T */}
      <g className="T">
        <line className="out-line" x1="24" y1="32" x2="84" y2="32" />
        <line className="out-line" x1="54" y1="32" x2="54" y2="92" />
        <line className="in-line" x1="24" y1="32" x2="84" y2="32" />
        <line className="in-line" x1="54" y1="32" x2="54" y2="92" />
      </g>
      {/* + */}
      <g className="cross">
        <line x1="109" y1="61" x2="121" y2="61" 
          style={{stroke:'red',strokeWidth:'8',strokeLinecap:"square"}} />
      
        <line x1="115" y1="55" x2="115" y2="67" rotate={45}
          style={{stroke:'red',strokeWidth:'8',strokeLinecap:"square"}} />
      </g>
      {/* 藏宝馆 */}
      <g className="txt">
      <text>
        <tspan 
          id={props.id} onClick={props.onClick}
          x="132" y="74" textLength="84" 
          fontSize="42" fontFamily="SimHei" fontWeight="bold">
          {props.name}
        </tspan>
      </text>
      </g>
      {/* 辅助线 */}
      {/* <line x1="1" y1="61" x2="229" y2="61" 
        style={{stroke:'black',strokeDasharray:' 1 2'}} />
      <line x1="115" y1="1" x2="115" y2="229" 
        style={{stroke:'black',strokeDasharray:' 1 2'}} /> */}
    </svg> 
  );
}

export {
  LogoButton,
};